<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="陈嘉乐">
    <title></title>
    <style>
        .box{
        width: 520px;
        height: 280px;
        margin: 100px auto;
        position: absolute;
        }
        
ul{
    margin: 0;
  padding: 0;
  list-style: none;
    
    }
li{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
li.current{
    display: block;
}

</style>
</head>
<body>
<div class="box">
    <ul>
        <li class="current"><a href="#"><img src="01.jpg" alt=""></a></li>
        <li><a href="#"><img src="02.jpg" alt=""></a></li>
        <li><a href="#"><img src="03.jpg" alt=""></a></li>
        <li><a href="#"><img src="04.jpg" alt=""></a></li>
        <li><a href="#"><img src="05.jpg" alt=""></a></li>
    </ul>
</div>
</body>
</html>
<script>
  var lis = document.querySelectorAll('li');

// 初始 显示索引为0的第一张
var index = 0;//记录当前显示图片的索引值
// 每隔一秒钟切换 一张图片 
setInterval(Changelmage,1000);
// 先让所有的图片隐藏 去除current类名
function Changelmage() {
    for (var i = 0; i < lis.length; i++) {
     lis[i].className= '';


  }
  //让记录显示图片的索引值加0
  index++;
  if (index == 5) {
      //当循环到最后一张时从第一张开始
      index = 0;
  }
  console.log(index);
  //根据索引值显示对应的图片
  lis[index].className = 'current';
}


  




</script>